<template>
  <div class="main_area">
    <div class="header">
      <x-header :left-options="{backText: ''}" class="xheader_style" left-options.showBack="false">
        <div slot="default" class="xheader_title">开通单列表</div>
        <div slot="overwrite-left" class="xheader_back"></div>
      </x-header>
      <div class="tip_area">
        <div class="tips">注：工单数据来源ODS-D系统</div>
      </div>
    </div>

    <!-- <div style="width:100%;height:1000px;background-color:red;position:absolute;top:60px;">

                <div style="width:100%;height:200px;background-color:black;position:relative;top:0px;">

                </div>
                <div style="width:100%;height:200px;background-color:green;position:relative;top:0px;">

                </div>

    </div>-->

    <div class="open_orders_list">
      <div class="content_nav">
        <div
          class="nav_ordering"
          :class="[ isClick ? 'nav_show' : 'nav_def']"
          @click="orderingClick"
        >在途单 ({{orderingNum}})</div>
        <div
          class="nav_his"
          :class="[ !isClick ? 'nav_show' : 'nav_def']"
          @click="hisClick"
        >历史单 ({{hisNum}})</div>
      </div>

      <div class="content_area">
        <div class="ordering" v-show="isClick">
          <ul>
            <li v-for="item in orderingLists" :key="item.id">
              <div class="item_style">
                <div class="line_style">
                  <strong class="orderingID_class">服务单号：{{item.orderID}}</strong>
                  <span class="city_class">{{item.city}}</span>
                </div>
                <div class="line_style">
                  <span class="item_dec">业务类型</span>
                  <span class="item_value">{{item.type}}</span>
                </div>
                <div class="line_style">
                  <span class="item_dec">客户名称</span>
                  <span class="item_value">{{item.userName}}</span>
                </div>
                <div class="line_style">
                  <span class="item_dec">申请时间</span>
                  <span class="item_value">{{item.applyTime}}</span>
                </div>
                <div class="line_style">
                  <span class="item_dec">受理时间</span>
                  <span class="item_value">{{item.handleTime}}</span>
                </div>
                <hr />
                <div>
                  <span v-if="item.state === 1">未处理</span>
                  <span v-else-if="item.state === 2">已处理</span>
                  <span class="item_detail">详情</span>
                </div>
              </div>
            </li>
          </ul>
        </div>
        <div class="hisOrder" v-show="!isClick">
          <ul>
            <li v-for="item in hisLists" :key="item.id">
              <div class="item_style">
                <div class="line_style">
                  <strong class="orderingID_class">服务单号：{{item.orderID}}</strong>
                  <span class="city_class">{{item.city}}</span>
                </div>
                <div class="line_style">
                  <span class="item_dec">业务类型</span>
                  <span class="item_value">{{item.type}}</span>
                </div>
                <div class="line_style">
                  <span class="item_dec">客户名称</span>
                  <span class="item_value">{{item.userName}}</span>
                </div>
                <div class="line_style">
                  <span class="item_dec">申请时间</span>
                  <span class="item_value">{{item.applyTime}}</span>
                </div>
                <div class="line_style">
                  <span class="item_dec">受理时间</span>
                  <span class="item_value">{{item.handleTime}}</span>
                </div>
                <hr />
                <div>
                  <span v-if="item.state === 1">未处理</span>
                  <span v-else-if="item.state === 2">已处理</span>
                  <span class="item_detail" @click="toDetail">详情</span>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "openOrders",
  components: {},
  created: function() {
    //throw "created";
    alert("created" + this.orderingNum);
  },
  beforeMount: function() {
    //throw "beforeMount";
    //alert("beforeMount");
  },
  mounted: function() {
    //throw "mounted";
    alert("mounted" + this.orderingNum);
  },
  data: function() {
    return {
      orderingNum: 4,
      hisNum: 1,
      isClick: true,
      orderingLists: [
        {
          orderID: 201812345678,
          city: "广州",
          type: "云专线订购",
          userName: "李工",
          applyTime: "2018-12-3",
          handleTime: "2018-12-4",
          state: 1
        },
        {
          orderID: 201812345679,
          city: "广州",
          type: "云专线订购",
          userName: "李工",
          applyTime: "2018-12-3",
          handleTime: "2018-12-4",
          state: 2
        },
        {
          orderID: 201812345678,
          city: "广州",
          type: "云专线订购",
          userName: "李工",
          applyTime: "2018-12-3",
          handleTime: "2018-12-4",
          state: 1
        },
        {
          orderID: 201812345679,
          city: "广州",
          type: "云专线订购",
          userName: "李工",
          applyTime: "2018-12-3",
          handleTime: "2018-12-4",
          state: 2
        },
        {
          orderID: 201812345678,
          city: "广州",
          type: "云专线订购",
          userName: "李工",
          applyTime: "2018-12-3",
          handleTime: "2018-12-4",
          state: 1
        },
        {
          orderID: 201812345679,
          city: "广州",
          type: "云专线订购",
          userName: "李工",
          applyTime: "2018-12-3",
          handleTime: "2018-12-4",
          state: 2
        }
      ],
      hisLists: [
        {
          orderID: 201812345678,
          city: "广州",
          type: "云专线订购",
          userName: "李工",
          applyTime: "2018-12-3",
          handleTime: "2018-12-4",
          state: 1
        },
        {
          orderID: 201812345679,
          city: "广州",
          type: "云专线订购",
          userName: "李工",
          applyTime: "2018-12-3",
          handleTime: "2018-12-4",
          state: 2
        }
      ]
    };
  },
  methods: {
    toDetail:function(){
      alert(123);
      this.$router.push({ path: "/hello" });
    },
    hisClick() {
      this.isClick = false;
    },
    orderingClick() {
      this.isClick = true;
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.header {
  position: fixed;
  z-index: 1;
  width: 100%;
  overflow: hidden;

  .xheader_style {
    background-color: deepskyblue;
    height: 60px;
    margin-top: 0px;
  }
  .xheader_back {
    vertical-align: middle;
    padding: 10px;
  }
  .xheader_title {
    background-color: deepskyblue;
    vertical-align: middle;
    margin-top: 10px;
    font-size: 24px;
    //padding: 10px;
  }
}

.tip_area {
  .tips {
    margin-top: 0px;
    text-align: center;
    padding: 15px 0px 15px 0px;
    background-color: deepskyblue;
    color: white;
  }
}

.open_orders_list {
  background-color: #9c9a9a2a;
  width: 100%;
  position: relative;
  top: 120px;
  margin-bottom: 20px;

  .content_nav {
    position: relative;
    //background-color: green;
    width: 96%;
    margin: auto;
    height: 80px;

    .nav_show {
      background-color: deepskyblue;
      color: white;
    }
    .nav_def {
      background-color: white;
      color: deepskyblue;
    }

    .nav_ordering {
      left: 10px;
      margin-top: 10px;
      position: absolute;
      width: 45%;
      padding: 15px;
      border: 1px solid deepskyblue;
      text-align: center;
      border-radius: 10px 0px 0px 10px;
    }
    .nav_his {
      margin-top: 10px;
      position: absolute;
      right: 10px;
      width: 45%;
      padding: 15px;
      border: 1px solid deepskyblue;
      border-radius: 0px 10px 10px 0px;
      text-align: center;
    }
  }

  .content_area {
    //background-color: #9c9a9a2a;
    //background-color: green;
    width: 96%;
    margin: auto;
    margin-top: 10px;
    position: relative;

    .ordering {
      width: 100%;
      background-color: white;
    }
    .hisOrder {
      width: 100%;
      background-color: white;
    }
    .item_style {
      font-size: 20px;
      padding: 10px;
      box-shadow: 0px 10px #9c9a9a2a;
      .orderingID_class {
        font-size: 24px;
      }
      .city_class {
        position: absolute;
        right: 20px;
      }
      .item_dec {
        color: #b6b4b4;
      }
      .line_style {
        margin: 10px;
      }
      .state_style {
        position: absolute;
        left: 10px;
      }
      .item_detail {
        position: absolute;
        vertical-align: middle;
        right: 40px;
      }
      .item_value {
        margin-left: 20px;
      }
    }
  }
}
</style>
